<template>
  <div class="container">
    <div class="title">甲烷传感器</div>
    <div class="content-container">
      <div class="tip-container">
        <div class="tip-circle circle1"></div>
        <div class="tip-text">正常</div>
        <div class="tip-circle circle2"></div>
        <div class="tip-text">接近超标</div>
        <div class="tip-circle circle3"></div>
        <div class="tip-text">超标</div>
      </div>
      <div class="chart-top" ref="chart1"></div>
      <div class="chart-bottom-container">
        <div class="chart-bottom-1" ref="chart2"></div>
        <div class="chart-bottom-2" ref="chart3"></div>
      </div>
    </div>
  </div>
</template>

<script>

  import $ from 'jquery'
  import _ from 'lodash'
  import * as Constant from './common/Constant';

  import highcharts from 'highcharts'
  import HighchartsMore from 'highcharts/highcharts-more';

  import chartConfig from './chartConfig/Methane';

  HighchartsMore(highcharts)

    export default {
        name: 'Methane',
        data() {
            return {
              chartData1:{},
              chart1:null,
              chartData2:{},
              chart2:null,
              chartData3:{},
              chart3:null,
            }
        },
        computed: {},
        methods: {
          getData(){
            let me = this;

            if(Constant.LOCAL){
              me.chartData1 = chartConfig.getConfig(_.random(1,200));
              me.chartData2 = chartConfig.getConfig(_.random(1,200),false);
              me.chartData3 = chartConfig.getConfig(_.random(1,200),false);

              me.updateChart();
            }
          },
          updateChart(){
            let me = this;
            if(!this.chart1){
              this.chart1 = highcharts.chart(this.$refs.chart1, this.chartData1)
            }else{
              this.chart1.series[0].points[0].update(this.chartData1.series[0].data[0])
            }
            if(!this.chart2){
              this.chart2 = highcharts.chart(this.$refs.chart2, this.chartData2)
            }else{
              this.chart2.series[0].points[0].update(this.chartData2.series[0].data[0])
            }
            if(!this.chart3){
              this.chart3 = highcharts.chart(this.$refs.chart3, this.chartData3)
            }else{
              this.chart3.series[0].points[0].update(this.chartData3.series[0].data[0])
            }
            setTimeout(me.getData, Constant.INTERVAL*1000);
          },
        },
        mounted() {
          let me = this;
          this.getData();
        },
        created() {

        }
    }
</script>

<style lang="stylus" scoped>
  .content-container
    display: flex;
    flex-direction: column;
    .tip-container
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      margin-bottom 5px;
      .tip-circle
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 8px;
      .circle1
        background-color #17b9b1
      .circle2
        background-color #BED474
        margin-left: 8px;
      .circle3
        background-color #BC2C5E
        margin-left: 8px;
      .tip-text
        font-size: 12px;
        color: #fff
    .chart-top
      flex: 1;
      width: 100%;
    .chart-bottom-container
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: row;
      .chart-bottom-1
        flex: 1;
        display flex
        align-items center
      .chart-bottom-2
        flex: 1;
        display flex
        align-items center
</style>
